var tempId;
var arrStr;
var arr = [];
var sexIpts = document.querySelectorAll("div#sex input[type='radio']");
var hobIpts = document.querySelectorAll("div#hobby input[type='checkbox']");
(function() {
    var pro = document.getElementById("pro");
    var user = document.getElementById("user");
    var age = document.getElementById("age");
    var edu = document.getElementById("edu");
    var add = document.getElementById("add");
    var updf = document.getElementById("updf");
    if (localStorage.arrStr) {
        arrStr = localStorage.arrStr;
        arr = JSON.parse(arrStr);
    } else {
        arr = [];
    }
    showPage(arr);
}());
updf.onclick = function() {
    var userName = user.value.trim();
    var ageV = age.value.trim();
    if (userName && ageV) {
        var obj = {
            id: tempId,
            user: userName,
            age: ageV,
            sex: getSex(),
            hobby: getHobby(),
            edu: edu.value
        }
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].id == tempId) {
                arr.splice(i, 1, obj);
            }
        }
        arrStr = JSON.stringify(arr);
        localStorage.arrStr = arrStr;
        showPage(arr);
        clearValue();
        add.style.display = "inline-block";
        updf.style.display = "none";
    } else {
        pro.innerHTML = "数据有误,请检查!";
    }
};
var oddColor = document.getElementById("oddColor");
var tab = document.getElementById("tab");
var key = true;
oddColor.onclick = function() {
    if (key) {
        this.innerHTML = "关闭隔行变色";
        key = false;
    } else {
        this.innerHTML = "开启隔行变色";
        key = true;
    }
    tab.classList.toggle("tog");
};
var enterColor = document.getElementById("enterColor");
enterColor.onclick = function() {
    if (key) {
        this.innerHTML = "关闭移入变色";
        key = false;
    } else {
        this.innerHTML = "开启移入变色";
        key = true;
    }
    tab.classList.toggle("trColor");
};
var ageSort = document.getElementById("ageSort");
ageSort.onclick = function() {
    var arrStr = localStorage.arrStr;
    var arr = JSON.parse(arrStr);
    arr.sort(function(a, b) {
        return a.age - b.age;
    });
    showPage(arr);
};

//按姓名查找
var search = document.getElementById("search");
var searchBtn = document.getElementById("searchBtn");
searchBtn.onclick = function() {
    var searchV = search.value;
    if (searchV != "") {
        pro.innerHTML = "";
        var arrNew = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].user.indexOf(searchV) != -1) {
                arrNew.push(arr[i]);
            }
        }
        if (arrNew.length == 0) {
            pro.innerHTML = "没有您要找的数据!";
        } else {
            showPage(arrNew);
        }
    }
};

//全部清除
var clearAll = document.getElementById("clearAll");
clearAll.onclick = function() {
    localStorage.arrStr = '';
    arrStr = '';
    arr = [];
    showPage([]);
}

add.onclick = function() {
    var userName = user.value.trim();
    var ageV = age.value.trim();
    pro.innerHTML = "";
    if (userName && ageV) {
        var obj = {
            id: getId(),
            user: userName,
            age: ageV,
            sex: getSex(),
            hobby: getHobby(),
            edu: edu.value
        }
        arr.unshift(obj);
        arrStr = JSON.stringify(arr);
        localStorage.arrStr = arrStr;
        showPage(arr);
        clearValue();
    } else {
        pro.innerHTML = "数据有误,请检查!";
    }
}

//清空输入部分
function clearValue() {
    user.value = age.value = edu.value = "";
    sexIpts[0].checked = true;
    allCheck(false);
}

function allCheck(f) {
    for (var i = 0; i < hobIpts.length; i++) {
        hobIpts[i].checked = f;
    }
}

//渲染页面
function showPage(arr) {
    var len = arr.length;
    var trth = document.querySelector("thead#trth");
    var tab = document.getElementById("tab");
    if (len == 0) {
        tab.innerHTML = "";
        trth.style.display = "none";
    } else {
        trth.style.display = "table-header-group";
        var trtd = "";
        for (var i = 0; i < arr.length; i++) {
            trtd += `
                    <tr>
                        <td>${arr[i].user}</td>
                        <td>${arr[i].age}</td>
                        <td>${arr[i].sex=="0"?"先生":"女士"}</td>
                        <td>${setHobby(arr[i].hobby)}</td>
                        <td>${setEdu(arr[i].edu)}</td>
                        <td>
                            <a onclick=upd(${JSON.stringify(arr[i])})>修改</a>
                            <a onclick=del(${arr[i].id})>删除</a>
                        </td>
                    </tr>
                `;
        }
        tab.innerHTML = trtd;
    }
}

//修改数据:步骤一
function upd(obj) {
    user.value = obj.user;
    age.value = obj.age;
    edu.value = obj.edu;
    obj.sex == "0" ? sexIpts[0].checked = true : sexIpts[1].checked = true;
    for (var i = 0; i < hobIpts.length; i++) {
        hobIpts[i].checked = false;
        for (var j = 0; j < obj.hobby.length; j++) {
            if (hobIpts[i].value == obj.hobby[j]) {
                hobIpts[i].checked = true;
            }
        }
    }
    add.style.display = "none";
    updf.style.display = "inline-block";
    tempId = obj.id;
}

//根据id,删除数据
function del(id) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i].id == id) {
            arr.splice(i, 1);
        }
    }
    arrStr = JSON.stringify(arr);
    localStorage.arrStr = arrStr;
    showPage(arr);
}

//设置爱好
function setHobby(arr) {
    var hobbyObj = {
        h1: "电影",
        h2: "唱歌",
        h3: "游泳",
        h4: "学习",
        h5: "健身"
    }
    var strHobby = "";
    for (var i = 0; i < arr.length; i++) {
        strHobby += hobbyObj[arr[i]] + " ";
    }
    return strHobby;
}

//设置学历
function setEdu(str) {
    var eduObj = {
        e1: "小学",
        e2: "中学",
        e3: "高中",
        e4: "大学",
        e5: "硕士"
    }
    return eduObj[str];
}

//获取爱好
function getHobby() {
    var arr = [];
    for (var i = 0; i < hobIpts.length; i++) {
        if (hobIpts[i].checked) {
            arr.push(hobIpts[i].value);
        }
    }
    return arr;
}

//获取性别
function getSex() {
    if (sexIpts[0].checked) {
        return sexIpts[0].value;
    } else {
        return sexIpts[1].value;
    }
}

//返回一个时间戳
function getId() {
    return new Date().getTime() + "";
}